<!-- src/components/TeacherHome.vue -->
<template>
  <div class="home-container">
    <!-- 顶栏 -->
    <div class="top-bar">
      <div class="top-bar-row">
        <h1 class="title">学生管理系统——教师端</h1>
        <el-button type="text" icon="el-icon-search" @click="toggleSearch"></el-button>
        <transition name="fade">
          <el-input v-if="showSearch" placeholder="请输入内容" v-model="search" class="search-input">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </transition>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            更多<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人信息</el-dropdown-item>
            <el-dropdown-item command="home">首页</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 主要区域容器 -->
    <div class="main-container">
      <!-- 侧边栏 -->
      <el-aside class="sidebar">
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="1" @click="goTo('/teacher-home/home')">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="2" @click="goTo('/teacher-home/courses')">
            <i class="el-icon-s-management"></i>
            <span slot="title">查看课程</span>
          </el-menu-item>
          <el-menu-item index="3" @click="goTo('/teacher-home/students')">
            <i class="el-icon-s-custom"></i>
            <span slot="title">查看学生数据</span>
          </el-menu-item>
          <el-menu-item index="4" @click="goTo('/teacher-home/grades')">
            <i class="el-icon-s-data"></i>
            <span slot="title">查看学生成绩</span>
          </el-menu-item>
          <el-menu-item index="5" @click="goTo('/teacher-home/logout')">
            <i class="el-icon-switch-button"></i>
            <span slot="title">注销账号</span>
          </el-menu-item>
          <el-menu-item index="6" @click="goTo('/teacher-home/changePassword')">
            <i class="el-icon-lock"></i>
            <span slot="title">修改密码</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主要区域 -->
      <el-main class="main-content" background-color="#f0f2f5">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/teacher-home/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="$route.path === '/teacher-home/courses'" :to="{ path: '/teacher-home/courses' }">查看课程</el-breadcrumb-item>
          <el-breadcrumb-item v-if="$route.path === '/teacher-home/students'" :to="{ path: '/teacher-home/students' }">查看学生数据</el-breadcrumb-item>
          <el-breadcrumb-item v-if="$route.path === '/teacher-home/grades'" :to="{ path: '/teacher-home/grades' }">查看学生成绩</el-breadcrumb-item>
          <el-breadcrumb-item v-if="$route.path === '/teacher-home/changePassword'" :to="{ path: '/teacher-home/changePassword' }">修改密码</el-breadcrumb-item>
          <el-breadcrumb-item v-if="$route.path === '/teacher-home/logout'" :to="{ path: '/teacher-home/logout' }" disabled>注销账号</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 路由视图 -->
        <router-view></router-view>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      activeIndex: '1',
      showSearch: false
    };
  },
  methods: {
    handleCommand(command) {
      if (command === 'profile') {
        this.goTo('/teacher-home/profile');
      } else if (command === 'home') {
        this.goTo('/teacher-home/home');
      } else if (command === 'logout') {
        this.goTo('/'); // 修改为跳转到登录页面
      }
    },
    goTo(path) {
      this.$router.push(path);
    },
    toggleSearch() {
      this.showSearch = !this.showSearch;
    }
  }
};
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-bar {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
}

.top-bar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: green;
  margin: 0 auto;
}

.search-input {
  width: 300px;
  margin-left: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  margin-left: 20px;
}

.main-container {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 150px; /* 调整侧边栏宽度 */
  background-color: #545c64;
}

.el-menu-vertical-demo {
  text-align: left; /* 使侧边栏内容左对齐 */
}

.main-content {
  flex: 1;
  padding: 20px;
  background-color: #f0f2f5;
}

.breadcrumb {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
